<template>
	<view class="music-container">
		<view class="music-title">我爱我的祖国</view>
		<view class="record-wrapper">
			<image class="record" :class="{ 'rotating': isPlaying }" src="/static/record.png" mode="aspectFit" />
			<image class="record-center" src="/static/record-center.png" mode="aspectFit" />
		</view>
		<view class="icons">
			<image src="/static/heart.png" mode="aspectFit" class="icon" />
			<image src="/static/download.png" mode="aspectFit" class="icon" />
			<image src="/static/bell.png" mode="aspectFit" class="icon" />
			<image src="/static/comment.png" mode="aspectFit" class="icon" />
			<image src="/static/more.png" mode="aspectFit" class="icon" />
		</view>
		<view class="controls">
			<image src="/static/prev.png" mode="aspectFit" class="control-icon" />
			<image :src="isPlaying ? '/static/pause.png' : '/static/play.png'" mode="aspectFit"
				class="control-icon play-icon" @click="togglePlay" />
			<image src="/static/next.png" mode="aspectFit" class="control-icon" />
		</view>
		<audio id="myAudio" src="/static/music.mp3" :loop="true" @play="handlePlay" @pause="handlePause">
		</audio>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false,
				audioContext: null
			};
		},
		onReady() {
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = "/static/music.mp3";
			this.audioContext.loop = true;
		},
		methods: {
			togglePlay() {
				this.isPlaying = !this.isPlaying;
				if (this.isPlaying) {
					this.audioContext.play();
				} else {
					this.audioContext.pause();
				}
			},
			handlePlay() {
				this.isPlaying = true;
			},
			handlePause() {
				this.isPlaying = false;
			}
		}
	};
</script>

<style>
	.music-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background: linear-gradient(to bottom, #81b2d8, #a6c9e2, #d1e2f0);
	}

	.music-title {
		font-size: 20px;
		color: #fff;
		margin-bottom: 40rpx;
	}

	.record-wrapper {
		position: relative;
		margin-bottom: 60rpx;
	}

	.record {
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
	}

	.record-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.rotating {
		animation: rotate 10s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.icons {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 60rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.controls {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	.control-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.play-icon {
		width: 80rpx;
		height: 80rpx;
	}
</style>